<template>
  <view class="container">
    <!-- 自定义导航栏 transparent-->

    <view class="content">
      <up-status-bar></up-status-bar>
      <!-- 头部 -->
      <view class="header">
        <view class="info">
          <view class="left" @click="$goURl('/subPackages/personal/set/userinfo')">
            <image :src="userInfo.head?userInfo.head:$defaultAvatar" mode="aspectFill"></image>
          </view>
          <view class="right">
            <view class="top">
              <view class="name">{{ userInfo.nickname || '茶疗馆用户' }}
                <image v-if="userInfo.person_money>0" class="vip" src="https://img.clc1319.com/static/img/personal/VIP.png"></image>   <view class="level_b l_f_r_c_c"> {{ userLevel[userInfo.level] }}</view>
              </view>
              <view class="tel" v-if="userInfo.mobile">{{ $setPhone(userInfo.mobile) }}</view>
              <!-- <view :class="userInfo.vip?'vip':'user'">{{['普通用户', '年卡会员'][userInfo.vip]}}
								<text v-if="userInfo.vip">到期时间:{{$clearTime(userInfo.vip_time,true)}}</text>
							</view> -->
            </view>
            <view class="dec">
              <view class="invite"
                    @click.stop="copy(`${proxy.$share}pages/login/register/?share=${userInfo.uid}`)">
                邀请码:{{ userInfo.uid }}
              </view>
            </view>
          </view>

        </view>
      </view>
      <view class="list1 l_f_r_sa_c">
        <view v-for="(item,index) in list1" class="items" @click="$goURl(`/subPackages/personal/wallet/balance?wallet_type=${item.status}`)">
          <view class="left l_f_c_c_c">
            <view class=" text_b_36">{{ userInfo[item.key]||0 }}</view>
            <view class=" text_5_24" style="margin-top: 10upx;">{{ item.name }}</view>
          </view>
          <!-- <uni-icons type="forward" size="18" color="#999"></uni-icons> -->
        </view>
      </view>
      <!-- 常用工具 -->
      <view class="order">
        <view class="l_f_r_sb_c">
          <view class="title">
            <text class="text_b_32">我的订单</text>
            <!--          <view v-for="(it,i) in toplists" :key="i" :class="i == activeIndex?'active':''"-->
            <!--                style="margin: 0 20rpx;" @click="handClicktab(it,i)">-->
            <!--            {{ it.name }}-->
            <!--          </view>-->
          </view>
          <view class="l_f_r_c_c" @click="$goURl('/subPackages/order/order?state=0')">
            <text class="text_5_24 text_c_45">全部订单</text>
            <uni-icons type="right"></uni-icons>
          </view>
        </view>

        <view class="listss">
          <view v-for="(item,index) in orderList" :key="index" class="item" @click="$goURl(item.url)">
            <view class="left text_5_24"  style="position: relative;">
              <u-badge  style="position: absolute;right: 35rpx;top: -10rpx; z-index: 9" :type="type"
                       max="99" :value="subscriptOrder[item.state-1]"></u-badge>
              <image class="img" :src="item.img" mode="">
              </image>
              {{ item.name }}
            </view>
            <!-- <uni-icons type="forward" size="22"></uni-icons> -->
          </view>
        </view>
      </view>
<!--      <view class="moneyListe">-->
<!--        <view class="box-new">-->
<!--          <view class="integral bg_set" @click="$goURl('/subPackages/personal/wallet/balance?wallet_type=0')">-->
<!--            <view class="l_f_r_c_c">-->
<!--              <text class=" text_5_24">茶果</text>-->
<!--            </view>-->
<!--            <text class="text_6_36 text_c_75">{{ $toFiexd(userInfo.money || 0, 2) }}</text>-->
<!--          </view>-->
<!--          <view class="integral integral2 bg_set" @click="$goURl('/subPackages/personal/wallet/balance?wallet_type=1')">-->
<!--            <view class="l_f_r_c_c">-->
<!--              <text class=" text_5_24">购物茶花</text>-->
<!--            </view>-->
<!--            <text class="text_6_36 text_c_75">{{ $toFiexd(userInfo.coupon || 0, 2) }}</text>-->
<!--          </view>-->

<!--        </view>-->


<!--      </view>-->
      <!-- 常用工具 -->
      <view class="order" style="background: #fff">
        <view class="text_b_32">
          <view>全部设置</view>
        </view>
        <view class="listss setList">
          <view v-for="(item,index) in setList" class="items" @click="$goURl(item.url)">
            <view class="left l_f_r">
              <image class="img" :src="item.img" mode=""></image>
              <view class=" text_5_28" style="margin-top: 10upx;">{{ item.name }}</view>
            </view>
            <uni-icons type="forward" size="18" color="#000"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <!-- <cc-defineDialogBox :isShow="isBox"></cc-defineDialogBox> -->
    <view v-if="isBox" class="page-total">
      <view class="box">
        <view class="dialog-box">
          <view class="title">景瓷商链绑定</view>

          <input v-model="account" placeholder="请输入景瓷商链账号" style="margin-left: 30px;" type="text">

          <view class="operation-btn">
            <view class="btn" @click="onCancel">
              <text>取消</text>
              <text class="tag"></text>
            </view>
            <view class="btn" @click="onConfirm">
              <text class="activity">确定</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <up-popup :show="showpopup" @close="showpopup=false" >
      <view class="popup_box">
        <view class="l_f_r_c_c">
          <text class="text_5_24">用于完善会员资料</text>
        </view>
        <view class="l_f_r_sa_c">
          <button class="close" @click="showpopup=false">取消</button>
          <button
              class="submit"
              open-type="getPhoneNumber"
              @getphonenumber="getphonenumber">
            确定
          </button>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
//商品列表
// import GoodsList from "@/components/home/goods/goodsList.vue"
// import * as qrcode from "../../static/js/reqrcode.js"
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted
} from "vue";
import {
  onLoad,
  onShow,


  onPullDownRefresh,
  onReachBottom
} from "@dcloudio/uni-app";

const {
  proxy
} = getCurrentInstance();
import {
  useStore
} from 'vuex';

const showpopup=ref(false)

// 按钮点击获取用户信息
const getphonenumber=(e)=> {
  console.log('getphonenumber',e)
  if (e.detail.code) {
    const code = e.detail.code;
    const dataD = {
      code: code,
      open_id:  data.open_id,
      share:shareRef.value

    };
    proxy.$request({
      url: 'api/getMobile/',
      method: 'POST',
      data: dataD,
      success(res) {
        console.log('res',res)
        if (res.errno == 0) {
          showpopup.value=false
          userInfo.value=res.data
          uni.setStorageSync('userInfo',res.data)
        } else {
          uni.showToast({
            title: res.data.msg,
          })
        }
      }
    })

  } else {
    // 用户拒绝授权
    uni.showToast({
      title: '需要授权才能获取用户信息',
      icon: 'none'
    });
  }
}

const store = useStore();
const decorationData = store.state.decorationData
const {
  appContext
} = getCurrentInstance();
let data = reactive({
  subscript: {},
  subscriptShow: false,
  current: 0,
  page: 0,
  size: 20,
  pages: 1,
  goodlistData: [],
  signAll: 0,
})
let userInfo = ref({})
let userLevel = ref([])
let isBox = ref(false)
const list1 = ref([

  {
    name: '茶花',
    key: "money",
    status: 0
  },

  {
    name: '茶豆',
    key: "coupon",
    status: 1
  },
  {
    name: '茶果',
    key: "fruit",
    status: 2
  },
  {
    name: '贡献值',
    key: "contribution",
    status: 3
  },
])
const subscriptOrder = ref('')
function q() {
  proxy.$request({
    url: `api/subscript/`,
    method: 'get',
    success(res) {
      subscriptOrder.value = res.data.order
    }
  })

}
const setList = ref([
  {
    img: 'https://img.clc1319.com/static/img/personal/setIt1.png',
    name: '地址管理',
    url: '/subPackages/personal/address/list'
  },
  // {
  //   img: 'https://img.clc1319.com/static/img/personal/setIt2.png',
  //   name: '实名认证',
  //   url: '/subPackages/personal/realName/realName'
  // },
  {
    img: 'https://img.clc1319.com/static/img/personal/setIt3.png',
    name: '粉丝管理',
    url: '/subPackages/personal/teams/team'
  },
  {
    img: 'https://img.clc1319.com/static/img/personal/setIt4.png',
    name: '我的收藏',
    url: '/subPackages/personal/footprint/index'
  },
  {
    img: 'https://img.clc1319.com/static/img/personal/setIt6.png',
    name: '我的商城',
    url: '/subPackages/business/MerchantManagement'
  },

  {
    img: 'https://img.clc1319.com/static/img/personal/setIt5.png',
    name: '更多设置',
    url: '/subPackages/personal/set/index'
  },
])

let account = ref("")
let toplists = reactive([{
  img: 'https://pili-vod.guanxikeji.com/moban/img/1718875354532.png',
  name: '普通订单',
  url: '/subPackages/order/order?state=0',
  type: 'normal'
}, {
  img: 'https://pili-vod.guanxikeji.com/moban/img/1718875407335.png',
  name: '秒杀订单',
  url: '/subPackages/order/orderFlashSale?state=0',
  type: 'instant'
}, {
  img: 'https://pili-vod.guanxikeji.com/moban/img/1718875399304.png',
  name: '砍价订单',
  url: '/subPackages/order/orderBargaining?state=0',
  type: 'bargain'
}, {
  img: 'https://pili-vod.guanxikeji.com/moban/img/1718875378236.png',
  name: '拼团订单',
  url: '/subPackages/order/orderTeamwork?state=0',
  type: 'groupBooking'
}])

let orderId = ref(1)
let activeIndex = ref(0)
let orderList = reactive([
  // {
  //   name: '全部',
  //   state: -1,
  //   img: 'https://pili-vod.guanxikeji.com/hongyunshangcheng/img/1743997278840.png',
  //   url: '/subPackages/order/order?state=0',
  //
  // },

  {
    name: '待付款',
    state: 1,
    img: 'https://img.clc1319.com/static/img/personal/itemImg1.png',
    url: '/subPackages/order/order?state=1',
  },
  {
    name: '待发货',
    state: 2,
    img: 'https://img.clc1319.com/static/img/personal/itemImg2.png',
    url: '/subPackages/order/order?state=2',
  },
  {
    name: '待收货',
    state: 3,
    img: 'https://img.clc1319.com/static/img/personal/itemImg3.png',
    url: '/subPackages/order/order?state=3',
  },
  {
    name: '已完成',
    state: 4,
    img: 'https://img.clc1319.com/static/img/personal/itemImg4.png',
    url: '/subPackages/order/order?state=4',
  },
])
const shareRef=ref('')
onLoad((option) => {
  shareRef.value = uni.getStorageSync('shareID', )

})

let moneyName = ref(null)
onShow(() => {

  data.page = 0
  data.pages = 1
  data.goodlistData = []
  inits()

  userInfo.value = uni.getStorageSync('userInfo')
  if (!userInfo.value.token) {
    // #ifdef MP-WEIXIN

    wxlogin()
    // #endif

  }
  setOder() //设置需要显示哪些订单
  userLevel.value = uni.getStorageSync('level')
  moneyName.value = uni.getStorageSync('money')
  account.value = userInfo.value.account

})

function onCancel() {

  isBox.value = false
}

function onConfirm() {

  let obj = {
    account: account.value
  }
  proxy.$request({
    url: `api/user_info/`,
    method: 'post',
    data: obj,
    success(res) {
      uni.showToast({
        icon: 'none',
        title: res.errmsg
      })
      isBox.value = false
      data.userInfo = res.data
      userInfo = res.data
      uni.setStorageSync('userInfo', res.data)
    }
  })


}

onPullDownRefresh(() => {
  inits()
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 500);
})
onReachBottom(() => {
  init()
})

// 显示输入弹框
function showDialogBoxInput() {
  console.log(DialogBox);
  DialogBox.confirm({
    title: '更改昵称',
    placeholder: '请输入修改的昵称',
    value: "",
    DialogType: 'input',
    animation: 0
  }).then((res) => {
    // 输入框返回值res

    console.log(res.value)
  })
}

function setOder() {
  let explain = uni.getStorageSync('explain') || decorationData
  explain =explain? JSON.parse(explain):[]
  let typeArr = explain.map((it) => {
    return it.type
  })
  const uniqueArr = [...new Set(typeArr)];
  toplists = toplists.filter(item => uniqueArr.includes(item.type));
  toplists.unshift({
    img: 'https://pili-vod.guanxikeji.com/moban/img/1718875354532.png',
    name: '我的订单',
    url: '/subPackages/order/order?state=0',
    type: 'normal'
  })


}

function getSign() {
  data.signAll = 0
  appContext.config.globalProperties.$request({
    url: `api/record/?page=${1}&size=${10000}&wallet_type=${1}&detailed=20`,
    method: 'GET',
    success(res) {
      if (res.data.data.length > 0) {
        res.data.data.forEach((it) => {
          data.signAll += it.money
        })
      }

    }
  })
}

function wxlogin() {
  uni.login({
    provider: 'weixin', //使用微信登录
    success: function (loginRes) {
      uni.showLoading({
        title: '登录中'
      });
      var config = {
        code: loginRes.code,
      }
      proxy.$request({
        url: 'api/wxLogin/',
        method: 'post',
        data: config,
        success: res => {
          uni.hideLoading()
          if (res.errno == 0) {
            userInfo.value = res.data
            uni.setStorageSync('userInfo', res.data)
            getBusinessToken()
          } else if (res.errno == 3) {
            data.open_id = res.data
            showpopup.value= true
          } else {
            uni.showToast({
              icon: 'none',
              title: res.errmsg
            })
          }
        }
      })
    },
  });
}

//tabs通知swiper切换
function tabsChange(index) {
  data.current = index;
}

//切换订单
function clickOrder(id) {
  orderId.value = id
}

// 扫码
function scan() {
  // #ifdef APP-PLUS
  uni.scanCode({
    success: function (res) {
      let dats = ''
      dats = res.result.split('=')
      appContext.config.globalProperties.$goURl('/subPackages/business/pay?id=' + dats[0] + '&discount=' +
          dats[1] +
          '&notes=' + dats[2] + '&money=' + dats[3])
    },
    fail(err) {
      uni.showToast({
        icon: 'none',
        title: '扫码失败'
      })
    }
  });
  // #endif

  // #ifdef H5
  // imgUp()
  // #endif

}

function getBusinessToken(url) { //获取商家token
  appContext.config.globalProperties.$request({
    url: `api/getBusinessToken/`,
    method: 'get',
    success(res) {
      if (res.errno == 0) {
        uni.setStorageSync('businessToken', res.data.businessToken)

      } else {


      }

    }
  })
}

// function imgUp() {
//   uni.chooseImage({
//     sizeType: ['original'],
//     count: 1,
//     success: function (res) {
//       const tempFilePaths = res.tempFilePaths
//       qrcode.qrcode.decode(tempFilePaths[0]);
//       qrcode.qrcode.callback = function (img) {
//         if (img == "error decoding QR Code") {
//           uni.showToast({
//             title: "识别二维码失败，请重新上传！",
//             duration: 2000,
//             icon: 'none'
//           })
//         } else {
//           let dats = img.split('=')
//           appContext.config.globalProperties.$goURl('/subPackages/business/pay?id=' + dats[0] +
//               '&discount=' + dats[
//                   1] + '&notes=' + dats[2] + '&money=' + dats[3])
//         }
//       }
//     }
//   });
// }

function init() {
  q()
  if (data.page < data.pages) {
    data.page++
    appContext.config.globalProperties.$request({
      url: `api/goods_list_all/0/?page=${data.page}&size=${data.size}&is_index=1`,
      method: 'get',
      success(resd) {
        if (resd.errno == 0) {
          data.pages = Math.ceil(resd.data.total / data.size)
          data.goodlistData = resd.data.data
          // isShow.value = true
        }
      }
    })
  }
}

function inits() {
  appContext.config.globalProperties.$request({
    url: `api/user_info/`,
    method: 'get',
    success(resd) {
      if (resd.errno == 0) {
        userInfo.value = resd.data
        uni.setStorageSync('userInfo', resd.data)
        setTimeout(()=>{
          init()
        },10)

        // getSign() //获取签到积分
      }
    }

  })

}

function scrollEvent(e) {
  console.log('scrollEvent', e)

}

function copy(data) {
  uni.setClipboardData({
    data: data,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      })
    }
  });
}

function applyBusinesss() { //获取审核结果
  appContext.config.globalProperties.$request({
    url: `api/applyBusiness/`,
    method: 'put',
    success(res) {
      if (res.errno == 0) {
        if (res.data.state == 1 || res.data.state == 3) {
          orderlists.value = [{
            img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
            name: '商家管理',
            url: '/subPackages/business/MerchantManagement'
          }]
        } else {
          orderlists.value = [{
            img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
            name: '商家申请',
            url: '/subPackages/business/applyfor'
          }]

        }
      } else {
        orderlists.value = [{
          img: 'https://pili-vod.guanxikeji.com/houdejia/img/1710465287107.png',
          name: '商家申请',
          url: '/subPackages/business/applyfor'
        },]
      }

    }
  })
}

//选择哪种订单
function handClicktab(obj, e) {
  activeIndex.value = e
  orderList.forEach((it, i) => {
    if (e !== 0 && i !== 3) {
      it.url = obj.url.slice(0, -1) + it.state;
    } else {
      it.url = obj.url.slice(0, -1) + it.state;
    }
  })
}
</script>
<style lang="scss" scoped>
page {
  background-color: #f0f4f9;
}

::v-deep .uni-navbar__header-btns-left {
  width: 200rpx !important;
}

::v-deep .uni-navbar__header-btns-right {
  width: 260rpx !important;
}

.container {
  background-repeat: no-repeat;
  background-size: 100% 200px;
  background-attachment: fixed;

  .set {
    width: 44rpx;
    height: 44rpx;
    margin-right: 40rpx;
    margin-top: 20rpx;

  }

  /* #ifdef MP-WEIXIN */
  .set {
    width: 44rpx;
    height: 44rpx;
    margin-right: 180rpx;
    margin-top: 20rpx;

  }

  /* #endif */
  .share {
    width: 44rpx;
    height: 44rpx;
    margin-left: 40rpx;
    margin-top: 20rpx;
  }


  .content {
    background-image: url("https://img.clc1319.com/static/img/personal/topBg.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding-top: 1rpx;
    background-color: #fafafa;
    min-height: 100vh;

    .header {
      height: calc(100px - 60upx);
      padding: 30upx;
      margin-top: 56rpx;
      margin-bottom: 40rpx;
      color: #888;

      .info {
        display: flex;
        align-items: flex-start;
        width: 100%;

        .left {
          margin-right: 20upx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border: 1px solid;
          border-radius: 50%;
          animation: borderBlink 1s infinite alternate;
          width: 140upx;
          height: 140upx;
          position: relative;

          .vip {
            position: absolute;
            top: -5rpx;
            right: -15rpx;
            width: 50rpx;
            height: 50rpx;
          }

          image {
            width: 140upx;
            height: 140upx;
            border-radius: 50%;
            // border: 1upx solid #000;
          }
        }


        .right {
          .top {
            .name {
              color: #000;
              font-size: 36upx;
              font-weight: bold;
              white-space: nowrap;
              /* 禁止换行 */
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
              /* 显示省略号 */
              display: flex;
              align-items: center;

              .vip {
                margin-left: 10rpx;
                margin-top: 5rpx;
                width: 40rpx;
                height: 40rpx;
              }
              .level_b{
                min-width: 124rpx;

                height: 40rpx;
                background: linear-gradient( 90deg, #E7EEE7 0%, #F8FFF0 100%);
                border-radius: 60rpx 60rpx 60rpx 60rpx;
                border: 2rpx solid #E6E6E6;
                font-family: Source Han Serif CN, Source Han Serif CN;
                font-weight: 500;
                font-size: 24rpx;
                color: #434343;
                margin-left: 10rpx;
              }
            }

            .tel {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 26rpx;
              color: #000;
            }

            .vip {
              color: #fcbc31;
              font-weight: bold;

              text {
                color: #fff;
              }
            }
          }

          .dec {
            display: flex;
            margin-top: 10upx;
            min-width: 186rpx;
            width: fit-content;
            height: 38rpx;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 48rpx 48rpx 48rpx 48rpx;

            .invite {
              font-weight: 500;
              font-size: 20rpx;
              color: #000000;
              padding: 5upx 20upx;
              border-radius: 20upx;
              white-space: nowrap;
              /* 禁止换行 */
              overflow: hidden;
              /* 超出部分隐藏 */
              text-overflow: ellipsis;
              /* 显示省略号 */
            }
          }
        }



      }

      .list {
        display: flex;
        margin-top: 30upx;

        .item {
          width: 33%;
          text-align: center;

          .num {
            color: #fff;
            font-size: 40upx;
            font-weight: bold;
          }

          .title {
            color: #fff;
            font-size: 22upx;
          }
        }
      }

      .listbox {
        display: flex;
        justify-content: space-between;
        margin-top: 30upx;

        .itembox {
          width: 45%;
          color: #707070;
          border: 1upx solid #707070;
          border-radius: 20upx;
          height: 140upx;
          text-align: center;
          line-height: 140upx;
        }
      }
    }

    .moneyListe {
      max-height: 340rpx;
      display: flex;
      justify-content: center;
      margin: 20upx;

      .box-new {
        gap: 18rpx;

        width: 100%;
        border-radius: 13px;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        align-items: center;

        .integral {
          flex: 1;
          height: 140rpx;
          display: flex;
          flex-direction: column;
          align-items: start;
          justify-content: center;
          padding-left: 20rpx;
          background-image: url("https://img.clc1319.com/static/img/personal/bg2.png");


        }

        .integral2 {
          background-image: url("https://img.clc1319.com/static/img/personal/bg1.png");

        }
      }

      .box {
        width: 100%;
        background: #FFFFFF;
        // border-radius: 26rpx 26rpx 26rpx 26rpx;
        border-radius: 13px 13px 13px 13px;
        background-image: url('https://pili-vod.guanxikeji.com/moban/img/1720494859241.png');
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: 296rpx 272rpx;

        .list_a {
          display: flex;
          padding: 34rpx 40rpx 0rpx 40rpx;
          justify-content: space-between;

          .jifen {
            display: flex;

            image {
              width: 40rpx;
              height: 40rpx;
            }

            .txt {
              font-weight: 500;
              font-size: 30rpx;
              color: #909090;
              margin-left: 12rpx;
            }
          }
        }

        .list_b {
          display: flex;
          justify-content: space-between;
          margin-top: 10rpx;
          margin-bottom: 20rpx;
          font-weight: bold;
          font-size: 60rpx;
          color: #000;
          padding: 0upx 0upx 0upx 20upx;

          .right {
            width: 180rpx;
            height: 70rpx;
            background: #00C356;
            border-radius: 36rpx 0rpx 0rpx 36rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 500;
            font-size: 26rpx;
            color: #FFFFFF;
            margin-top: -30rpx;

            image {
              width: 40rpx;
              height: 40rpx;
              margin-right: 8rpx;
            }
          }


        }

        .list_c {
          background-color: rgba(239, 239, 239, 0.35);
          display: flex;
          justify-content: space-around;
          height: 130rpx;
          padding-top: 34rpx;

          .linecenter {
            height: 70%;
            width: 1px;
            background-color: #ccc;
          }

          // padding: 24rpx;

        }
      }
    }

    .list1 {
      width: 690rpx;
      margin: 0 auto 42rpx;
    }

    .order {
      margin: 20upx;
      background-color: #FFF;
      border-radius: 13px 13px 13px 13px;
      padding: 28upx;
      box-sizing: border-box;

      .title {
        font-weight: bold;
        color: #000;
        margin: 0 8upx;
        display: flex;
        font-size: 15px;
        justify-content: flex-start;

        .active {
          color: #000;;
        }


      }

      .list {
        display: flex;
        margin: 20upx;
        align-items: center;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 20upx;

          image {
            width: 50upx;
            height: 50upx;
            margin-bottom: 30upx;
          }

          .imgs {
            width: 80upx;
            height: 80upx;
          }

          .text {
            color: #666666;
            font-size: 24upx;
            background: url('https://pili-vod.guanxikeji.com/hongyunshangcheng/img/1744115257955.png');
            background-size: 100% 100%;

          }

          .texts {
            color: #333;
            font-size: 28upx;
            font-weight: bold;
          }
        }
      }

      .lists {
        padding: 20upx;
        // border-top: 1upx solid #F5F5F5;
        grid-template-columns: repeat(4, 1fr);
        display: grid;

        .items {
          display: flex;
          align-items: center;
          background-color: #F6F6F6;
          border-radius: 40upx;
          padding: 10upx 20upx;
          justify-content: center;

          image {
            width: 40upx;
            height: 40upx;
            margin-right: 10upx;
          }

          .texts {
            color: #666666;
            font-size: 24upx;
          }
        }
      }

      .listss {

        // border-top: 1upx solid #F5F5F5;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;

        .item {
          justify-content: center;
          padding: 20upx 0;

          .left {
            display: flex;
            align-items: center;
            flex-direction: column;

            .text_5_24 {
              white-space: nowrap;
            }

            .img {
              width: 72rpx;
              height: 72rpx;
            }
          }
        }

        &.setList {
          display: block;
          background: #fff;

          .items {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20upx 0;
            width: 100%;
            height: 56rpx;

            .left {
              font-size: 24upx;
              color: #111;
              // font-weight: bold;
              align-items: center;

              .text_5_28 {
                white-space: nowrap;

              }

              .img {
                width: 40rpx;
                height: 40rpx;
                margin-top: 10rpx;
                margin-right: 10rpx;
              }
            }
          }
        }

      }
    }

    .GoodsListTitle {
      font-weight: bold;
      color: #333;
      margin: 20upx;
      padding-left: 20rpx;
      font-size: 16px;
      display: flex;
      justify-content: flex-start;
    }
  }
}

::v-deep .z-tabs-bottom {
  bottom: 0px !important;
}


$base: #fe3b0f; // 基础颜色

.page-total {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.box {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* 文件重命名 */
.dialog-box {
  width: 80%;
  height: 300rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100rpx;
    font-size: 32rpx;
    color: #222222;
    font-weight: bold;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    height: 80rpx;
    margin: 0 auto;
    background-color: #f6f6f6;
    border-radius: 10rpx;

    input {
      width: 80%;
      height: 100%;
      font-size: 28rpx;
      color: #222222;
      padding: 0 4%;
    }

    text {
      font-size: 34rpx;
      color: #c0c0c0;
      margin-right: 4%;
    }
  }

  .inquiry {
    padding: 0 4%;
    height: 80rpx;
    text-align: center;

    text {
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
    }
  }

  .operation-btn {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100rpx;
    margin-top: 20rpx;
    border-top: 2rpx solid #f6f6f6;

    .btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 100%;

      text {
        font-size: 28rpx;
        color: #222222;
      }

      .tag {
        position: absolute;
        right: 0;
        top: 30%;
        width: 2rpx;
        height: 40%;
        background-color: #f6f6f6;
      }

      .activity {
        color: $base;
      }
    }
  }
}


.icon_img {
  width: 40rpx;
  height: 36rpx;
  margin-right: 10rpx;
}
.popup_box{
  padding: 30rpx 0;
  .l_f_r_c_c{
    margin-bottom: 40rpx;
  }
  .close{
    padding: 0rpx 40rpx;

  }
  .submit{
    background-color: #7dc03c;
    padding: 0rpx 40rpx;
    color: #fff;

  }
}
:deep(.u-badge){
  position: absolute;right: 35rpx;top: -10rpx; z-index: 9
}
</style>
